<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket web client</title>
</head>

<body>
    <h1>WebSocket Web Client</h1>
    <br />
    <ul id="messageList"></ul>

    <div style="margin-bottom:5px;">
        room no: <input type="text" id="txtRoomNo" value="8888" /> <button id="btnJoin">join room</button> <button id="btnLeave">leave room</button>
    </div>
    <div style="margin-bottom:5px;">
        nick name: <input type="text" id="txtNickName" value="batman" />
    </div>
    <div style="height:300px;width:600px">
        <textarea style="height:100%;width:100%" id="msgList"></textarea>
        <div style="text-align: right">
            <input type="text" id="txtMsg" value="" />  <button id="btnSend">send</button>
        </div>
    </div>

    <script>
        var msgList = document.getElementById("msgList");
        var btnJoin = document.getElementById("btnJoin");
        var txtRoomNo = document.getElementById("txtRoomNo");
        var txtNickName = document.getElementById("txtNickName");
        var btnLeave = document.getElementById("btnLeave");
        var btnSend = document.getElementById("btnSend");
        
        var server = 'ws://192.168.0.163:5000'; //如果开启了https则这里是wss

        var WEB_SOCKET = new WebSocket(server + '/ws');

        WEB_SOCKET.onopen = function (evt) {
            console.log('Connection open ...');
            $("#msgList").val('websocket connection opened .');

        };

        WEB_SOCKET.onmessage = function (evt) {
            console.log('Received Message: ' + evt.data);
            if (evt.data) {
                var content = $("#msgList").val();
                content = content + '\r\n' + evt.data;

                $("#msgList").val(content);
            }
        };

        WEB_SOCKET.onclose = function (evt) {
            console.log('Connection closed.');
        };

        $("#btnJoin").click(function () {
            var roomNo = $("#txtRoomNo").val();
            var nick = $("#txtNickName").val();
            if (roomNo) {
                var msg = {
                    action: 'join',
                    msg: roomNo,
                    nick: nick
                };
                WEB_SOCKET.send(JSON.stringify(msg));
            }
        })

        //$("#btnJoin").on('click', function () {
        //    var roomNo = $('#txtRoomNo').val();
        //    var nick = $('#txtNickName').val();
        //    if (roomNo) {
        //        var msg = {
        //            action: 'join',
        //            msg: roomNo,
        //            nick: nick
        //        };
        //        WEB_SOCKET.send(JSON.stringify(msg));
        //    }
        //});

        $('#btnSend').on('click', function () {
            var message = $('#txtMsg').val();
            var nick = $('#txtNickName').val();
            if (message) {
                WEB_SOCKET.send(JSON.stringify({
                    action: 'send_to_room',
                    msg: message,
                    nick: nick
                }));
            }
        });

        $('#btnLeave').on('click', function () {
            var nick = $('#txtNickName').val();
            var msg = {
                action: 'leave',
                msg: '',
                nick: nick
            };
            WEB_SOCKET.send(JSON.stringify(msg));
        });
    </script>
</body>

</html>
